<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>二维码扫码页面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <meta http-equiv="Cache-control" content="no-cache">
    <meta name="format-detection" content="telephone=no">
    <script type="text/javascript" src="/js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="/js/sockjs.min.js"></script>
    <script type="text/javascript" src="/js/stomp.min.js"></script>
</head>
<body>
<div class="col-sm-10">
    <input id="content" type="text" name = "content"/>
    <input id="send" type="submit" value="submit" name = "send" onclick="sendMessage()"/>
</div>

<script language='javascript' type='text/javascript'>

    var stomp,sock;

    $(document).ready(function () {
        if (window.WebSocket){
            websocketConfig();
        } else {
            alert("错误","浏览器不支持websocket技术通讯.");
        }
    });



    //websocket配置
    function websocketConfig() {
        //连接url为endpointChat的endpoint,对应后台WebSoccketConfig的配置
        sock = new SockJS("http://localhost:8091/contactChatSocket");
        sockHandle();
        stompConfig();
    }



    function stompConfig() {
        //使用STOMP子协议的websocket客户端
        stomp = Stomp.over(sock);
        stomp.connect({accountId:'[[${accountId}]]'}, function(frame) {
            //这里的订阅地址和controller的convertAndSendToUser地址一致，多出的user必须的，指的是用户之间发送消息
            //这里的地址和后台的Controller sendChatMsg方法的chatAddress 一致
            stomp.subscribe("/user/[[${accountId}]]/queue/contactMessage[[${chatId}]]", function (message) {
                //处理响应消息
                //var json = JSON.parse(message.body);
                console.log(message.body);

            });

            //订阅处理错误的消息地址,接收错误消息
            stomp.subscribe("/user/[[${accountId}]]/queue/contactErrors[[${chatId}]]", function (message) {
                var response = JSON.parse(message.body);
                var error = response.error;
                alert("发送失败"+error);
            });
        });
    }



    //发送消息
    function sendMessage() {
        //文本框的内容
        var content =  $("#content").val();
        if ($.trim($("#content").val()).length <= 0){
            return ;
        }
        //拼接成json传到后台
        var data = {
            chatId:'[[${chatId}]]',
            schoolId:'[[${schoolId}]]',
            toUserId:'[[${receiverId}]]',
            content:content,
            fromUserId:'[[${accountId}]]',
            appId:'[[${appId}]]',
            msgType:1
        };
        //发送
        stomp.send("/sendChatMsg",{},JSON.stringify(data) );
    }



    function sockHandle() {
        sock.onopen = function () {
            console.log("------连接成功------");
        };
        sock.onmessage = function (event) {
            console.log('-------Received: ' + event.data);
        };
        sock.onclose = function (event) {
            console.log('--------Info: connection closed.------');
        };
        //连接发生错误
        sock.onerror = function () {
            alert("连接错误", "网络超时或通讯地址错误.");
            disconnect();
        } ;
    }



    //关闭websocket
    function disconnect() {
        if (sock != null) {
            sock.close();
            sock = null;
        }
    }


</script>
</body>
</html>